<template>
  <el-form ref="formRef" :model="form" label-width="120px">
    <el-form-item prop="name" label="菜品名称">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item prop="categoryId" label="菜品分类">
      <el-select v-model="form.categoryId" placeholder="选择菜品分类">
        <el-option v-for="i in categoryList" :key="i.id" :label="i.name" :value="i.id" />
      </el-select>
    </el-form-item>
    <el-form-item prop="price" label="菜品价格">
      <el-input v-model.number="form.price" />
    </el-form-item>
    <el-form-item label="口味做法配置">
      <div style="display: flex; justify-content: space-between">
        <el-select
          v-for="(item, i) in flavorList"
          :key="i"
          v-model="selectedFlavorList[i].value[0]"
          :placeholder="'选择' + item.name"
        >
          <el-option v-for="type in item.type" :key="type" :label="type" :value="type" />
        </el-select>
      </div>
    </el-form-item>
    <el-form-item label="口味做法配置">
      <template #default>
        <el-upload
          class="avatar-uploader"
          action="#"
          list-type="picture-card"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :http-request="uploadFile"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </template>
    </el-form-item>
    <el-form-item prop="description" label="菜品描述">
      <el-input v-model="form.description" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addDish">新增</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import { selectCateApi } from '@/api/category.js'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { employeeStore } from '@/stores/index.js'
import { upload } from '@/api/index.js'
import { addDishApi } from '@/api/dish.js'
const store = employeeStore()

const formRef = ref(null)
//菜品分类列表
const categoryList = ref({})
onMounted(async () => {
  const res = await selectCateApi({
    page: 1,
    pageSize: 30
  })
  categoryList.value = res.data.list
})
const form = reactive({
  name: '',
  categoryId: '',
  price: '',
  image: '',
  description: '',
  status: 1,
  code: ''
})

const addDish = async() => {
  const obj = {
    ...form,
    flavors: selectedFlavorList.value.map(item => {
      item.value = JSON.stringify(item.value)
      return item
    })
  }
  try {
    const res = await addDishApi(obj)
    form.value.resetFields()
    console.log(res);
  } catch (err) {
    console.log(err);
  }
}
const flavorList = [
  {
    name: '甜度',
    type: ['无糖', '微甜', '中度甜', '全糖']
  },
  {
    name: '辣度',
    type: ['不辣', '微辣', '中辣', '变态辣']
  }
]
//选中口味
const selectedFlavorList = ref([
  {
    name: '甜度',
    value: [],
    showOption: false
  },
  {
    name: '辣度',
    value: [],
    showOption: false
  }
])

//图片上传
const fileTypes = ['image/jpeg', 'image/jpg', 'image/png']
const beforeAvatarUpload = (rawFile) => {
  if (!fileTypes.includes(rawFile.type)) {
    ElMessage.error('文件格式必须 jpeg， png， jpg')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
const imageUrl = ref('')
const uploadFile = async (options) => {
  const data = new FormData()
  data.append('uploadFile', options.file)
  try {
    const img = await upload(data, store.empInfo.token)
    form.image = img.data
    imageUrl.value = URL.createObjectURL(options.file)
  } catch (err) {
    console.log(err)
  }
}
//图片上传
</script>

<style lang="scss">
.avatar {
  width: 148px;
}
</style>
